<template>
    <div>
        <!--头部导航栏 一个pane是一个页面，要写页面就要在对应的pane下写-->
        <div>
            <el-tabs type="border-card">
                <el-tab-pane label="客单列表">
                    <!--点击按钮查询表格-->
                    <el-row>
                        <el-button type="primary">当天在住</el-button>
                        <el-button type="primary">当天预离</el-button>
                        <el-button type="primary">当天预抵</el-button>
                        <el-button type="primary">有效预订</el-button>
                        <el-button type="primary">取消客单</el-button>
                        <el-button type="primary">离店迟付</el-button>
                        <el-button type="primary">历史客单</el-button>
                        <el-button type="primary">客单审核</el-button>
                    </el-row>

                    <!--更细致的查询-->
                    <div style="margin-top: 10px">
                        <el-form ref="form" :inline="true" :model="sizeForm" size="mini">
                            <el-form-item label="抵店日期">
                                <el-date-picker
                                    type="date"
                                    placeholder="选择日期"
                                    v-model="sizeForm.arriveDate"
                                    style="width: 185px"
                                ></el-date-picker>
                            </el-form-item>

                            <el-form-item label="离店日期">
                                <el-date-picker
                                    type="date"
                                    placeholder="选择日期"
                                    v-model="sizeForm.leaveDate"
                                    style="width: 185px"
                                ></el-date-picker>
                            </el-form-item>

                            <el-form-item label="房间号">
                                <el-input v-model="sizeForm.roomNumber" placeholder="请输入房间号"></el-input>
                            </el-form-item>

                            <el-form-item label="客房类型">
                                <el-select v-model="sizeForm.roomType" placeholder="请选择客房类型">
                                    <el-option label="标准单人间" value="0"></el-option>
                                    <el-option label="标准双人间" value="1"></el-option>
                                    <el-option label="豪华大床房" value="2"></el-option>
                                    <el-option label="商务套房" value="3"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="手机号">
                                <el-input v-model="sizeForm.guestPhone" placeholder="请输入手机号"></el-input>
                            </el-form-item>

                            <el-form-item label="房间环境">
                                <el-select v-model="sizeForm.roomEnvironment" placeholder="请选择客房状态">
                                    <el-option label="脏房" value="0"></el-option>
                                    <el-option label="净房" value="1"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
                                <el-button size="small">取消</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table
                            :data="tableData"
                            border
                            style="width: 100%"
                            class="table"
                            ref="multipleTable"
                            header-cell-class-name="table-header"
                        >
                            <el-table-column prop="guestName" label="客户姓名" align="center"> </el-table-column>
                            <el-table-column prop='guestPhone' label="手机号" align="center"> </el-table-column>
                            <el-table-column prop='arriveDate' label="抵店日期" align="center"> </el-table-column>
                            <el-table-column prop='leaveDate' label="离店日期" align="center"> </el-table-column>
                            <el-table-column prop='roomNumber' label="房间号" align="center"> </el-table-column>
                            <el-table-column prop='checkNumbers' label="入住人数" align="center"> </el-table-column>
                            <!--                            <el-table-column-->
                            <!--                                    prop="'roomPrice'"-->
                            <!--                                    label="价格"-->
                            <!--                                    align="center">-->
                            <!--                            </el-table-column>-->
                        </el-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="快速预订">
                    <el-form ref="form" :inline="true" :model="sizeForm" size="mini">
                        <el-form-item label="抵店日期">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="sizeForm.date3"
                                style="width: 185px"
                            ></el-date-picker>
                        </el-form-item>

                        <el-form-item label="离店日期">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="sizeForm.date4"
                                style="width: 185px"
                            ></el-date-picker>
                        </el-form-item>

                        <el-form-item label="姓名">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item label="身份证">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item label="手机号">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item label="备注">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit2" size="small">添加</el-button>
                            <el-button size="small">取消</el-button>
                        </el-form-item>

                        <br />

                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="date" label="状态"> </el-table-column>
                            <el-table-column prop="name" label="抵店日期"> </el-table-column>
                            <el-table-column prop="address" label="离店日期"> </el-table-column>
                            <el-table-column prop="address" label="主单名称"> </el-table-column>
                            <el-table-column prop="address" label="联系人"> </el-table-column>
                            <el-table-column prop="address" label="房数"> </el-table-column>
                            <el-table-column prop="address" label="价格"> </el-table-column>
                            <el-table-column prop="address" label="早餐"> </el-table-column>
                            <el-table-column prop="address" label="房型"> </el-table-column>
                            <el-table-column prop="address" label="入住人"> </el-table-column>
                            <el-table-column prop="address" label="房号"> </el-table-column>
                            <el-table-column prop="address" label="房态"> </el-table-column>
                            <el-table-column prop="address" label="客源"> </el-table-column>
                        </el-table>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="快速入住">
                    <el-form ref="form" :inline="true" :model="sizeForm" size="mini">
                        <el-form-item label="抵店日期">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="sizeForm.date3"
                                style="width: 185px"
                            ></el-date-picker>
                        </el-form-item>

                        <el-form-item label="离店日期">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="sizeForm.date4"
                                style="width: 185px"
                            ></el-date-picker>
                        </el-form-item>

                        <el-form-item label="联系人">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item label="联系手机号">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item label="主单名称">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item label="合约单位">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item label="普通会员">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item label="业务员">
                            <el-input v-model="sizeForm.user"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-checkbox label="团体" name="type"></el-checkbox>
                            <el-checkbox label="客情保密" name="type"></el-checkbox>
                            <el-checkbox label="隐藏房价" name="type"></el-checkbox>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit2" size="small">添加</el-button>
                            <el-button size="small">取消</el-button>
                        </el-form-item>

                        <br />

                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="date" label="状态"> </el-table-column>
                            <el-table-column prop="name" label="抵店日期"> </el-table-column>
                            <el-table-column prop="address" label="离店日期"> </el-table-column>
                            <el-table-column prop="address" label="主单名称"> </el-table-column>
                            <el-table-column prop="address" label="联系人"> </el-table-column>
                            <el-table-column prop="address" label="房数"> </el-table-column>
                            <el-table-column prop="address" label="价格"> </el-table-column>
                            <el-table-column prop="address" label="早餐"> </el-table-column>
                            <el-table-column prop="address" label="房型"> </el-table-column>
                            <el-table-column prop="address" label="入住人"> </el-table-column>
                            <el-table-column prop="address" label="房号"> </el-table-column>
                            <el-table-column prop="address" label="房态"> </el-table-column>
                            <el-table-column prop="address" label="客源"> </el-table-column>
                        </el-table>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="新预订">新预订</el-tab-pane>

                <el-tab-pane label="新入住">新入住</el-tab-pane>

                <el-tab-pane label="客历列表">客历列表</el-tab-pane>

                <el-tab-pane label="发票管理">发票管理</el-tab-pane>

                <el-tab-pane label="门卡管理">门卡管理</el-tab-pane>

                <el-tab-pane label="其它">其它</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { getPageList } from '../../api/order/index';

export default {
    name: 'basetable',
    data() {
        return {
            sizeForm: {},
            query: {
                guestName: '',
                guestPhone: '',
                arriveDate: '',
                leaveDate: '',
                roomNumber: '',
                roomType: '',
                roomEnvironmen: ''
            },
            tableData: [],
            date3: '',
            date4: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            var self = this;
            this.$axios.get('http://localhost:8080/quickbooking/order/api/getAll').then(function (res) {
                self.tableData = res.data.data;
            });
        },
        onSubmit() {
            this.$set(this.query);
            this.getData();
        },
        onSubmit2() {},
        click() {}
    }
};
</script>

<style>
</style>
